<template>
  <div data-v-ccf2e192="" class="wrapper">
    <div data-v-ccf2e192="" class="pdf-sign">
      <div class="content">
        <div class="pdf-tab">
          <div class="header">
            <div class="content">
              <div class="content-tabs"
                   style="width: 329px; transform: perspective(500px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
                <div class="item">
                  <div class="text">旅游合同.pdf</div>
                  <div class="icon" style="display: none;"></div>
                </div>
              </div>
            </div>
            <div class="more" @click="showMore=true">
              <div data-v-ccf2e192="" class="more">
                <div data-v-ccf2e192="" class="icon"></div>
                <div data-v-ccf2e192="" class="text">更多</div>
              </div>
            </div>
          </div>
          <div data-body="body" class="body">
            <div class="container" style="width: 100%;height: 100%">
              <!-- style="width: 1242px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);"-->
              <div class="item" style="overflow-y: scroll">
                <div class="viewer">
                  <img class="pdf-img" src="../assets/img/1.png">
                  <img class="pdf-img" src="../assets/img/2.png">
                  <img class="pdf-img" src="../assets/img/3.png">
                  <img class="pdf-img" src="../assets/img/4.png">
                  <img class="pdf-img" src="../assets/img/5.png">
                  <img class="pdf-img" src="../assets/img/6.png">
                  <template v-for="(item,index) in signArr" v-key="index">
                    <VueDragResize :isActive="true" :isResizable="false" :w="60" :h="60" :x="item.x" :y="item.y"
                                   v-on:dragging="resize" :preventActiveBehavior="true">
                      <img class="sign-img" :src="item.url">
                      <button @click="console.log(1)"></button>
                      <div class="bubble top">
                        <div id="field-delete" class="bubble-item" v-on:touchstart="deleteThis(index)">删除</div>
                        <div id="field-change" class="bubble-item" v-on:touchstart="changeThis(index)">换章</div>
                      </div>
                    </VueDragResize>
                  </template>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pdf-bar"><!---->
        <div class="content">
          <div class="sealBox" @click="showSign=true">
            <div class="item draw"></div>
            <div class="text">手绘</div>
          </div>
          <div class="sealBox-line">
            <div class="item divide"></div>
          </div>
          <div class="sealBox" @click="sign2Flag=true">
            <div class="item seal"></div>
            <div class="text">盖章</div>
          </div>
          <div class="item date" style="display: none;"></div>
        </div>
        <div class="actions" @click="toNext">
          <div class="btn primary">提交</div>
        </div>
      </div>
      <div data-v-ccf2e192="" class="pdf-sealsheet" style="">
        <div data-v-ccf2e192="" class="mask" @click="sign2Flag=false" v-show="sign2Flag"></div>
        <div data-v-ccf2e192="" class="content" v-show="sign2Flag">
          <div data-v-ccf2e192="" class="tabs">
            <div data-v-ccf2e192="" class="header seal-header" style="display: none;">
              <div data-v-ccf2e192="" class="item">
                <div data-v-ccf2e192="" class="text active">个人章</div>
              </div>
            </div>
            <div data-v-ccf2e192="" class="body seal-body" style="flex: 0 0 auto; overflow-y: auto;">
              <div data-v-ccf2e192="" class="action center drawMore">
                <div data-v-ccf2e192="" class="action-btn drawHeight"><span data-v-ccf2e192=""
                                                                            class="action-icon"></span><span
                  data-v-ccf2e192="" @click="showSign=true" class="action-text">手绘印章</span></div>
              </div>
              <div data-v-ccf2e192="" class="item">
                <div data-v-ccf2e192="">
                  <div data-v-ccf2e192="" class="itemElse">
                    <div data-v-ccf2e192="" class="img">
                      <img src="../assets/sign.png" style="width: 68px" alt="" @click="gaizhang">
                    </div>
                    <div data-v-ccf2e192="" class="content">
                      <div data-v-ccf2e192="" class="corp"><!----><!----><!----></div>
                      <div data-v-ccf2e192="" class="name"></div>
                    </div>
                  </div><!----></div><!----><!----></div><!----></div>
          </div><!----></div>
      </div>
      <div class="pdf-sealeditor">
        <div class="mask" style="display: none;"></div>
        <div class="content" style="display: none;">
          <div class="header"><span class="close">取消</span><span class="title">印章编辑</span><span
            class="confirm" @click="getSignBase64">确定</span></div>
          <div class="item">
            <div class="left"><span>盖章页设置</span></div>
            <div class="right">
              <div class="btn">
                当前页
              </div>
              <div class="btn">
                所有页
              </div>
            </div>
          </div>
          <div class="item">
            <div class="left"><span>显示签署日期</span></div>
            <div class="right">
              <div class="switch">
                <div class="switch-btn"></div>
              </div>
            </div>
          </div>
          <div class="scroll">
            <div class="item">
              <div class="left sub disable"><span></span></div>
              <div class="right">
                <div class="radio checked disable"></div>
              </div>
            </div>
            <div class="item">
              <div class="left sub disable"><span>YYYY/MM/DD</span></div>
              <div class="right">
                <div class="radio disable"></div>
              </div>
            </div>
            <div class="item">
              <div class="left sub disable"><span>YYYY-MM-DD</span></div>
              <div class="right">
                <div class="radio disable"></div>
              </div>
            </div>
            <div class="item">
              <div class="left sub disable"><span>YYYY年MM月DD日</span></div>
              <div class="right">
                <div class="radio disable"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mask" style="display: none;"></div>
      <div class="tip" style="display: none;">
        点击文件上想要盖章的位置添加印章
      </div>
    </div>
    <div data-v-ccf2e192="" class="mint-popup modal-draw mint-popup-bottom" style="z-index: 2013;" v-if="showSign">
      <div data-v-ccf2e192="" class="ai-and-pure-draw-pad"><!----><!----><!----><!---->
        <div class="pure-title left" @click="showSign=false"></div><!---->
        <div class="draw-box">
          <div class="draw">
            <div class="draw-bar">
              <div class="select-color">
                <div @click="checkColor=1" :class="[checkColor==1?'active':'','color','boxshadow']" style="background-color: rgb(0, 0, 0);"></div>
                <div @click="checkColor=2" :class="[checkColor==2?'active':'','color']"  style="background-color: rgb(230, 0, 0);"></div>
              </div>
              <div class="btn-grp">
                <div @click="clearSign" class="btn default"><span>
            清除
            </span></div>
                <div @click="getSignBase64" class="btn confirm"><span>
            确定
            </span></div>
              </div>
            </div>
            <div class="draw-pad" id="sig">
              <div class="bg-img"></div>
              <canvas class="canvas" id="canvas"></canvas>
            </div>
          </div>
          <div class="drawWidth" style="display: none;">
            <div class="drawWidth-pad">
              <div class="bg-img"></div>
              <canvas class="canvas"></canvas>
            </div>
            <div class="drawWidth-bar">
              <div class="select-color">
                <div class="color active boxshadow" style="background-color: rgb(0, 0, 0);"></div>
                <div class="color" style="background-color: rgb(230, 0, 0);"></div>
              </div>
              <div class="drawWidth-btn-grp">
                <div class="btn default"><span>清除</span></div>
                <div class="btn confirm"><span>确定</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!----><!----><!----><!----><!----><!----><!----><!----><!---->
    <div data-v-ccf2e192="" class="attachment-entry" style="display: none;"><span data-v-ccf2e192="">查看附件</span>
      <!--<img data-v-ccf2e192="" src="./文件签署_files/down-view.019ccb6a.svg" class="icon">-->
    </div>
    <div data-v-063f9ea4="" data-v-ccf2e192="" class="mint-popup attachment-sheet mint-popup-bottom"
         style="display: none;">
      <div data-v-063f9ea4="" class="body"><!---->
        <div data-v-063f9ea4="" class="list up"><!----><!----></div><!----><!----></div>
      <div data-v-063f9ea4="" class="close">关闭</div>
    </div>
    <div data-v-3ebd9c1e="" data-v-ccf2e192="" class="mint-popup attachment-viewer" style="display: none;"></div>
    <div data-v-ccf2e192="" class="more-content" v-if="showMore">
      <div data-v-ccf2e192="" class="mask" @click="showMore=false"></div>
      <div data-v-ccf2e192="" class="content">
        <div data-v-ccf2e192="" class="popup"><span data-v-ccf2e192=""><em data-v-ccf2e192=""></em></span>
          <div data-v-ccf2e192="" class="item" @click="toRefuse">
            <div data-v-ccf2e192="" class="logo refuse"></div>
            <div data-v-ccf2e192="" class="title">拒绝签署</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask-new" v-if="showNew"></div>
    <div class="dialog-new" v-if="showNew">
      <img src="../assets/dialog-new.png"/>
      <p>你有以下电子文件待签署，电子文件与纸质文件具有同等法律效力，请务必仔细阅读和理解文件内容。</p>
      <el-button size="mini" @click="showNew=false" style="background-color: rgb(230, 23, 23);color: #fff">确定</el-button>
    </div>
  </div>
</template>
<script>
  import SignaturePad from '../assets/signature_pad.min'
  import $ from 'jquery'
  import VueDragResize from 'vue-drag-resize';
  import imageUrl from '../assets/sign.png'

  export default {
    name: 'Pdf',
    components: {
      VueDragResize
    },
    data() {
      return {
        showSign: false,
        signaturePad: null,
        signArr: [],
        sign2Flag: false,
        showMore: false,
        showNew:true,
        checkColor:1
      }
    },
    watch: {
      showSign(newVal) {
        let that = this;
        setTimeout(function () {
          that.changeSize();
        }, 500)

      },
      checkColor(){
        let that = this;
        setTimeout(function () {
          that.changeSize();
        }, 500)
      },
    },
    created() {
      // $(window).resize(function () {
      //   this.changeSize();
      // });
    },

    methods: {
      gaizhang(){
        let arrItem = [
          {
            url: imageUrl,
            x: 100,
            y: 300 - $('.viewer').offset().top,
          }
        ];
        this.signArr = this.signArr.concat(arrItem);
        this.sign2Flag = false;
      },
      deleteThis(idx){
        console.log(1)
        this.signArr.splice(idx,1)

      },
      changeThis(idx){
        this.showSign = true;
        this.signArr.splice(idx,1)
      },
      dragClick(){
        console.log(1)
      },
      toRefuse() {
        this.$router.push({path: '/refuse'})
      },
      changeSize() {
        // debugger
        let that = this;
        if (window.innerHeight > window.innerWidth) {
          $('#sig').css("min-height", ((window.innerHeight / 2) - 100));
          $("#canvas").attr({"height": (window.innerHeight - 100) * 2, "width": window.innerWidth * 2});
        } else {
          $('#sig').css("min-height", (window.innerHeight - 100));
          $("#canvas").attr({"height": (window.innerHeight - 100) * 2, "width": window.innerWidth * 2});
          $('html,body').animate({scrollTop: 0}, 'slow');
        }
        var canvasX = $("#canvas")[0];
        console.log(canvasX)
        this.signaturePad = new SignaturePad(canvasX, {
          dotSize: 0,
          velocityFilterWeight: 1,
          minWidth: 2.0,
          maxWidth: 5.2,
          penColor: that.checkColor==1?"rgb(0,0,0)":"rgb(255,0,0)",
          backgroundColor: "rgb(0,0,0,0)"
        });
      },
      clearSign() {
        this.signaturePad.clear();
      },
      toNext() {
        this.$router.push({path: '/yiyuan'})
      },
      getSignBase64() {
        if (this.signaturePad.isEmpty()) {
          alert("画布为空，请先手绘签名再提交！");
        } else {
          var canvas = document.getElementById("canvas");
          //获取图片的Base64，包含头信息data:image/png;base64,
          var canvasData = canvas.toDataURL("image/png");
          /* canvasData = encodeURIComponent(encodeURIComponent(canvasData));    */
          //alert(canvasData);
          //去掉图片Base64中的头信息data:image/png;base64,直接可作为sealData使用
          console.log(canvasData);
          // var image_base64 = canvasData.split(",")[1];
          // console.log(image_base64);
          console.log($('.viewer').offset().top)
          let arrItem = [
            {
              url: canvasData,
              x: 100,
              y: 300 - $('.viewer').offset().top,
            }
          ];
          this.signArr = this.signArr.concat(arrItem);
          this.showSign = false;
          this.sign2Flag = false;
          //alert(image_base64);
          // document.getElementById("sealData").value = image_base64;
          //此处提交您的手写签名数据canvasData
        }

      },
      resize(newRect) {
        // this.width = newRect.width;
        // this.height = newRect.height;
        // this.top = newRect.top;
        // this.left = newRect.left;
      }
    }
  }
</script>
<style scoped>
  @import "../assets/mcss/main.css";
  @import "../assets/mcss/chunk.css";
  @import "../assets/mcss/picker.css";
  /*@import "../assets/css/013.css";*/
  .viewer {
    /*overflow-y: scroll;*/
  }
  .pdf-tab > .body{
    padding: 3.4rem 0 3.2rem;
  }

  .viewer .pdf-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .viewer .sign-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .drawHeight {
    text-align: center;
  }

  .pdf-sealsheet > .content {
    min-height: 50%;
  }

  .pdf-sealsheet > .content .action-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
  }

  .drawHeight span {
    font-size: 1rem !important;
  }

  .pdf-sealsheet > .content .action.center {
    height: 4rem;
    display: flex;
    justify-content: center;
  }

  .seal-body > .item .itemElse {
    height: 6rem;
  }

  .pdf-sealsheet > .content > .tabs > .body {
    padding-top: 4rem;
  }

  .pdf-tab > .header > .more {
    width: 60px;
  }

  .more {
    height: 100%;
  }

  .more > .text {
    font-size: 14px;
  }

  .more > .icon {
    width: 16px;
    height: 16px;
  }

  .pdf-tab > .header > .more:before {
    width: 1px;
    height: 50%;
  }

  .more-content {
    width: 100px;
    top: 3.4rem;
  }

  .more-content .content {
    width: 1001%;
  }

  .more-content .content .item {
    height: 35px;
    align-items: center;
    justify-content: center;
  }

  .more-content .content .popup {
    width: 100px;
  }

  .more-content .content .item .title {
    position: initial;
    width: auto;
  }

  .more-content .content .item .logo {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  .bubble {
    background: transparent;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    z-index: 3;
    height: 35px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    left: 50%;
    bottom: 70px;
  }

  .bubble.top:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 4px solid grey;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: -4px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .bubble-item {
    background: grey;
    color: #fff;
    font-size: 14px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60px;
  }

  .bubble-item:first-child {
    border-top-left-radius: .106667rem;
    border-bottom-left-radius: .106667rem;
    border-right: 1px solid #999;
  }
  .seal-body{
    height: 100%;
  }
  .seal-body > .item .itemElse > .img{
    width: 68px;
    height: 68px;
  }
  .more-content .content .item .title{
    font-size: 14px!important;
  }
  .pdf-bar > .content{
    padding-left: 15px;
  }
  .pdf-bar > .actions > .btn.primary{
    width: 4.5rem;
    height: 2.2rem;
    font-size: 16px!important;

  }
  .mask-new{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
  }
  .dialog-new{
    width: 82vw;
    position: fixed;
    top: 20vh;
    left: 50%;
    margin-left: -41vw;
    z-index: 10000;
    background-color: #fff;
    padding-bottom: 20px;
  }
  .dialog-new img{
    display: block;
    width: 100%;
  }
  .dialog-new p{
    padding: 1.5rem;
    font-size: 18px;
    color: #1a1a1a;
    /*line-height: .746667rem;*/
    line-height: 26px;
    text-align: justify;
  }
  .dialog-new button{
    /*margin-top: 30px;*/
    width: 80px;
    border-radius: 5px;
    font-size: 16px;
  }
</style>
